<!-- 戴博学 字典管理 -->
<template>
  <div id="sysArticle">
    <div>
      <el-card style="margin-bottom: 10px">
        <el-input
          v-model="input"
          style="width: 200px"
          placeholder="请输入字典名称"
          suffix-icon="el-icon-message"
        ></el-input>
        <el-button
          class="custom-button ml-10"
          icon="el-icon-search"
          @click="selectLike()"
          >搜索</el-button
        >
        <el-button
          class="custom-buttonT ml-10"
          icon="el-icon-refresh"
          @click="refresh()"
          >刷新页面</el-button
        >
        <el-button
          style="margin-left: 30px"
          class="custom-buttonT"
          icon="el-icon-plus"
          @click="dialogFormInsertVisible = true"
          >新增</el-button
        >
      </el-card>

      <!-- 数据 -->
      <el-card>
        <el-table
          :data="
            tableData.slice(
              (this.page.pageNum - 1) * this.page.pageSize,
              this.page.pageNum * this.page.pageSize
            )
          "
          border
          stripe
          height="600"
        >
          <el-table-column prop="dictId" label="字典编号" width="180">
          </el-table-column>
          <el-table-column prop="dictName" label="字典名称" width="180">
          </el-table-column>
          <el-table-column prop="dictType" label="字典类型" width="180">
            <template slot-scope="scope">
              <router-link
                :to="'/SysData/' + scope.row.dictId"
                class="link-type"
              >
                <span>{{ scope.row.dictType }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <!-- <template slot-scope="scope">
              <el-button type="danger" v-if="scope.row.status === 1"
                ></el-button
              >
              <el-button type="primary" v-if="scope.row.status === 0"
                ></el-button
              >
            </template> -->

            <template slot-scope="scope">
              <el-tag effect="plain" v-if="scope.row.status == 1">停用</el-tag>
              <el-tag
                effect="plain"
                class="pass_button"
                type="success"
                v-if="scope.row.status == 0"
                >正常</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="180">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="pass_button"
                @click="updateClick(scope.row)"
                icon="el-icon-info"
                >修改
              </el-button>
              <el-button
                class="pass_button"
                @click="deleteById(scope.row.dictId)"
                icon="el-icon-check"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table></el-card
      >
      <el-pagination
        class="pageAll"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="text-align: center"
      >
      </el-pagination>
      <el-dialog
        title="修改字典类型信息"
        :visible.sync="dialogFormUpdateVisible"
        @close="handleClose('dictForm')"
      >
        <el-form
          status-icon
          ref="dictForm"
          :model="dictForm"
          label-width="100px"
        >
          <el-form-item label="字典名称:">
            <el-col :span="8">
              <el-input v-model="dictForm.dictName"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="字典类型:">
            <el-col :span="8">
              <el-input v-model="dictForm.dictType"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="状态:">
            
            <el-radio v-model="dictForm.status" label="0">正常</el-radio>
            <el-radio v-model="dictForm.status" label="1">停用</el-radio>
          
          </el-form-item>
          <el-form-item label="备注:">
            <el-col :span="8">
              <el-input v-model="dictForm.remark"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormUpdateVisible = false">取 消 </el-button>
          <el-button @click="updateDict()">修改 </el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="增加字典类型信息"
        :visible.sync="dialogFormInsertVisible"
        @close="handleClose('newDictForm')"
      >
        <el-form
          status-icon
          ref="newDictForm"
          :model="newDictForm"
          label-width="100px"
        >
          <el-form-item label="字典名称:">
            <el-col :span="8">
              <el-input v-model="newDictForm.dictName"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="字典类型:">
            <el-col :span="8">
              <el-input v-model="newDictForm.dictType"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio v-model="newDictForm.status" label="0">正常</el-radio>
            <el-radio v-model="newDictForm.status" label="1">停用</el-radio>
          </el-form-item>
          <el-form-item label="备注:">
            <el-col :span="8">
              <el-input v-model="newDictForm.remark"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormInsertVisible = false">取 消 </el-button>
          <el-button @click="insertDict()">确定添加 </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "sysArticle",
  template: "#sysArticle",
  created() {
    this.selectDictByPage();
  },
  data() {
    return {
      tableData: [],
      //分页参数
      page: {
        // 数据总条数
        total: 0,
        // 当前页
        pageNum: 1,
        // 每页条数
        pageSize: 4,
      },
      dictForm: {
        dictId: "",
        dictName: "",
        dictType: "",
        status: "",
        remark: "",
      },
      newDictForm: {
        dictId: "",
        dictName: "",
        dictType: "",
        status: "",
        remark: "",
      },
      dialogFormUpdateVisible: false,
      dialogFormInsertVisible: false,
      input: "",
    };
  },
  methods: {
    selectDictByPage(row) {
      this.$axios.get("/dictType/selectDictByPage").then((res) => {
        this.page.total = res.data.data.totalSize;
        this.tableData = res.data.data.content;
        
      });
    },
    //分页控制方法
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.selectDictByPage();
    },
    //分页控制方法
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.selectDictByPage();
    },
    // 重置数据，同时也取消了表单的校验 refundFormData：el-form用ref绑定的值，
    handleClose(formName) {
      this.$refs[formName].resetFields();
    },
    updateDict() {
      var formData = new FormData();
      formData.set("dictId", this.dictForm.dictId);
      formData.set("dictName", this.dictForm.dictName);
      formData.set("dictType", this.dictForm.dictType);
      formData.set("status", this.dictForm.status);
      formData.set("remark", this.dictForm.remark);
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post("/dictType/updateDict", formData)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success("恭喜你，修改成功！");
                this.dialogFormUpdateVisible = false;
                this.selectDictByPage();
                
              } else {
                this.$message.warning("对不起，修改失败！");
              }
            })
            .catch((error) => {
              this.$message.error("服务器崩溃了，请稍后再尝试使用！");
            });
        } else {
          return false;
        }
      });
    },
    updateClick(row) {
      this.dictForm.dictId = row.dictId;
      this.dictForm.dictName = row.dictName;
      this.dictForm.dictType = row.dictType;
      this.dictForm.status = row.status;
      this.dictForm.remark = row.remark;
      this.dialogFormUpdateVisible = true;
    },
    deleteById(row) {
      this.$confirm("是否永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/dictType/deleteById?dictId=" + row)
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.selectDictByPage();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    insertDict() {
      var formData = new FormData();
      formData.set("dictId", this.newDictForm.dictId);
      formData.set("dictName", this.newDictForm.dictName);
      formData.set("dictType", this.newDictForm.dictType);
      formData.set("status", this.newDictForm.status);
      formData.set("remark", this.newDictForm.remark);
      this.$refs.newDictForm.validate((valid) => {
        if (valid) {
          this.$axios
            .post("/dictType/insertDict", formData)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success("恭喜你，添加成功！");
                this.dialogFormInsertVisible = false;
                this.selectDictByPage();
              } else {
                this.$message.warning("对不起，添加失败！");
              }
            })
            .catch((error) => {
              this.$message.error("服务器崩溃了，请稍后再尝试使用！");
            });
        } else {
          return false;
        }
      });
    },
    refresh() {
      this.$router.go(0);
    },
    selectLike() {
      this.$axios
        .get("/dictType/selectLike?dictName=" + this.input)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
.custom-button {
  margin-left: 10px;
  background-color: #2cd3b5; /* 设置按钮的背景颜色 */
  color: #fff; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
.selected {
  color: red; /* 设置选中状态下的颜色 */
}
</style>